<template>
  <div class="root" ref="rootRef"></div>
  <div class="graph"></div>
  <div class="graph-io">
    <span title="下载 XML" @mousedown="downloadXml">
      <img src=""
        alt="下载XML" />
    </span>
    <span id="upload-xml" title="上传 XML">
      <input type="file" class="upload" @change="uploadXml" />
      <img class="upload-img"
        src=""
        alt="上传XML" />
    </span>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import LogicFlow from "@logicflow/core";
import {
  BpmnElement,
  BpmnXmlAdapter,
  Control,
  Menu,
  SelectionSelect,
  DndPanel,
} from "@logicflow/extension";
import "@logicflow/core/es/index.css";
import "@logicflow/extension/lib/style/index.css";

const rootRef = ref(null)
const lfRef = ref(null);

const download = (filename, text) => {
  const element = document.createElement("a");
  element.setAttribute(
    "href",
    "data:text/plain;charset=utf-8," + encodeURIComponent(text)
  );
  element.setAttribute("download", filename);
  element.style.display = "none";
  document.body.appendChild(element);
  element.click();
  document.body.removeChild(element);
};

const downloadXml = () => {
  const data = lfRef.value.getGraphData();
  download("logic-flow.xml", data);
};

const uploadXml = (ev) => {
  const file = ev.target.files[0];
  const reader = new FileReader();
  reader.onload = (event) => {
    if (event.target) {
      const xml = event.target.result;
      lfRef.value.render(xml);
    }
  };
  reader.readAsText(file);
};

onMounted(() => {
  lfRef.value = new LogicFlow({
    container: rootRef.value,
    stopZoomGraph: true, // 禁止缩放画布
    metaKeyMultipleSelected: true,
    grid: true, // 网格，若设为false不开启网格，则为 1px 移动单位，不绘制网格背景；若设置为true，则开启则默认为 20px 点状网格
    keyboard: {
      enabled: true,
    },
    snapline: true, // 是否启用节点辅助对齐线。
    plugins: [
      BpmnElement,
      BpmnXmlAdapter,
      Control,
      Menu,
      SelectionSelect,
      DndPanel,
    ],
  });

  lfRef.value.setPatternItems([
    {
      label: "选区",
      icon: "",
      callback: () => {
        lfRef.current.openSelectionSelect();
        lfRef.current.once("selection:selected", () => {
          lfRef.current.closeSelectionSelect();
        });
      },
    },
    {
      type: "bpmn:startEvent",
      label: "开始",
      text: "开始",
      icon: "",
    },
    {
      type: "bpmn:userTask",
      label: "用户任务",
      text: "用户任务",
      icon: "",
    },
    {
      type: "bpmn:serviceTask",
      label: "系统任务",
      text: "系统任务",
      icon: "",
    },
    {
      type: "bpmn:exclusiveGateway",
      label: "条件判断",
      text: "条件判断",
      icon: "",
    },
    {
      type: "bpmn:endEvent",
      label: "结束",
      text: "结束",
      icon: "",
    },
  ]);

  lfRef.value.render({});

  // http://www.hhzai.top/flow/flow-design/index/1272591609623613440?disabled=true&pageNum=1
});
</script>

<style scoped>
.root {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.explain {
  height: 30px;
}

.graph {
  width: 100%;
  height: calc(100% - 30px);
}

.graph-io {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  padding: 10px;
  display: flex;
}

.graph-io>span {
  margin: 0 5px;
  cursor: pointer;
}

#upload-xml {
  position: relative;
  overflow: hidden;
  display: inline-block;
  cursor: pointer;
}

.upload {
  position: absolute;
  z-index: 99;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}

.upload::-webkit-file-upload-button {
  cursor: pointer;
}

.upload-img {
  width: 26px;
}
</style>
